<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入 favicon 图标 -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <!-- 引入 css 文件 -->
    <link rel="stylesheet" href="./less/index.css" />
    <!-- 引入字体图标文件 -->
    <link rel="stylesheet" href="./fonts/iconfont.css" />
    <title>哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</title>
  </head>
  <body>
    <!-- 头部模块 -->
    <header class="suspension">
      <div class="m-navbar">
        <a href="#" class="logo">
          <i class="iconfont Navbar_logo"></i>
        </a>
        <div class="right">
          <a href="#" class="search">
            <i class="iconfont ic_search_tab"></i>
          </a>
          <a href="#" class="face">
            <img src="images/login.png" alt="" />
          </a>
          <div class="app-btn">
            <img src="images/download.png" alt="" />
          </div>
        </div>
      </div>
      <div class="channel-menu">
        <div class="tabs">
          <div class="tab-list">
            <a href="#">首页</a>
            <a href="#">动画</a>
            <a href="#">番剧</a>
            <a href="#">音乐</a>
            <a href="#">舞蹈</a>
            <a href="#">鬼畜</a>
            <a href="#">鬼畜</a>
            <a href="#">鬼畜</a>
            <a href="#">鬼畜</a>
            <!-- 红线 -->
            <div class="line"></div>
          </div>
        </div>
        <div class="after">
          <i class="iconfont general_pulldown_s"></i>
        </div>
      </div>
    </header>
    <!-- 主体区域 -->
    <div class="m-home">
      <div class="video-list">
        <a class="video-item" href="#">
          <div class="card">
            <img src="images/dog.jpg@480w_270h_1c" alt="" />
            <div class="count">
              <span>
                <i class="iconfont icon_shipin_bofangshu"></i>
                63.4万</span
              >
              <span>
                <i class="iconfont icon_shipin_danmushu"></i>
                1.1万</span
              >
            </div>
          </div>
          <p class="title ellipsis-2">十三香汉堡包</p>
        </a>
        <a class="video-item" href="#">
          <div class="card">
            <img src="images/dog.jpg@480w_270h_1c" alt="" />
            <div class="count">
              <span>
                <i class="iconfont icon_shipin_bofangshu"></i>
                63.4万</span
              >
              <span>
                <i class="iconfont icon_shipin_danmushu"></i>
                1.1万</span
              >
            </div>
          </div>
          <p class="title ellipsis-2">当小米SU7撞上一辆极氪007。。。</p>
        </a>
        <a class="video-item" href="#">
          <div class="card">
            <img src="images/dog.jpg@480w_270h_1c" alt="" />
            <div class="count">
              <span>
                <i class="iconfont icon_shipin_bofangshu"></i>
                63.4万</span
              >
              <span>
                <i class="iconfont icon_shipin_danmushu"></i>
                1.1万</span
              >
            </div>
          </div>
          <p class="title ellipsis-2">
            从玩家到制作人，用游戏承载梦想——《星杰纪元：原核》的诞生之路
          </p>
        </a>
        <a class="video-item" href="#">
          <div class="card">
            <img src="images/dog.jpg@480w_270h_1c" alt="" />
            <div class="count">
              <span>
                <i class="iconfont icon_shipin_bofangshu"></i>
                63.4万</span
              >
              <span>
                <i class="iconfont icon_shipin_danmushu"></i>
                1.1万</span
              >
            </div>
          </div>
          <p class="title ellipsis-2">
            从玩家到制作人，用游戏承载梦想——《星杰纪元：原核》的诞生之路
          </p>
        </a>
        <a class="video-item" href="#">
          <div class="card">
            <img src="images/dog.jpg@480w_270h_1c" alt="" />
            <div class="count">
              <span>
                <i class="iconfont icon_shipin_bofangshu"></i>
                63.4万</span
              >
              <span>
                <i class="iconfont icon_shipin_danmushu"></i>
                1.1万</span
              >
            </div>
          </div>
          <p class="title ellipsis-2">
            从玩家到制作人，用游戏承载梦想——《星杰纪元：原核》的诞生之路
          </p>
        </a>
        <a class="video-item" href="#">
          <div class="card">
            <img src="images/dog.jpg@480w_270h_1c" alt="" />
            <div class="count">
              <span>
                <i class="iconfont icon_shipin_bofangshu"></i>
                63.4万</span
              >
              <span>
                <i class="iconfont icon_shipin_danmushu"></i>
                1.1万</span
              >
            </div>
          </div>
          <p class="title ellipsis-2">
            从玩家到制作人，用游戏承载梦想——《星杰纪元：原核》的诞生之路
          </p>
        </a>
        <a class="video-item" href="#">
          <div class="card">
            <img src="images/dog.jpg@480w_270h_1c" alt="" />
            <div class="count">
              <span>
                <i class="iconfont icon_shipin_bofangshu"></i>
                63.4万</span
              >
              <span>
                <i class="iconfont icon_shipin_danmushu"></i>
                1.1万</span
              >
            </div>
          </div>
          <p class="title ellipsis-2">
            从玩家到制作人，用游戏承载梦想——《星杰纪元：原核》的诞生之路
          </p>
        </a>
        <a class="video-item" href="#">
          <div class="card">
            <img src="images/dog.jpg@480w_270h_1c" alt="" />
            <div class="count">
              <span>
                <i class="iconfont icon_shipin_bofangshu"></i>
                63.4万</span
              >
              <span>
                <i class="iconfont icon_shipin_danmushu"></i>
                1.1万</span
              >
            </div>
          </div>
          <p class="title ellipsis-2">
            从玩家到制作人，用游戏承载梦想——《星杰纪元：原核》的诞生之路
          </p>
        </a>
      </div>
    </div>
    <!-- 底部 -->
    <footer class="app">
      <div class="btn-app">
        <i class="iconfont Navbar_logo"></i>
        打开App，看你感兴趣的视频
      </div>
    </footer>
  </body>
</html>
